import React, {MutableRefObject, useEffect, useRef, useState} from 'react';
import {Button, Space, Table, Tag} from 'antd';

const { Column, ColumnGroup } = Table;
import {getUser,deleteUser} from "../../../api/user";
import { Pagination } from 'antd';
import EditPassWord from "./editPassWord";
import useFormModal from "./editPassWord";
import PassWordForm from "./PassWordForm";
import {FormInstance} from "antd/es/form";
import UsersForm from "./UsersForm";
import withModal from '../../../components/WithModal';

interface DataType {
    id: number,
    key: React.Key;
    firstName: string;
    lastName: string;
    age: number;
    address: string;
    tags:object [];
}

const Index: React.FC = () => {
    const [userInfo,setUserInfo] = useState({})
    //const {open,FormModal: UserModal} = useFormModal({title:'修改密码',userInfo:userInfo},React.forwardRef(PassWordForm))
    const [title, setTitle] = useState("");
    const delUser = (id:number)=>{
        deleteUser(id).then((res:any)=>{
            if(res.data.code===1) {
                getList({paginate})
            }
        })
    }
    const getList = ({paginate}: { paginate: any })=>{
        getUser(paginate).then(res=>{
            if(res.data.code ===1){
                setUserList(res.data.data.list)
                setPaginate( {page:res.data.data.page, per_page: 10, total:res.data.data.total})
            }
        })
    }
    const [userList,setUserList] = useState([])
    const [paginate,setPaginate] = useState({page:1,per_page:10,total:0})
    const onOk = ()=>{
        console.log('点击了')
    }
    const onCancel = () => {
        console.log('取消了')
    }
    //关闭弹窗
    const [visiable, setVisiable] = useState(false);
    const [visiable1, setVisiable1] = useState(false);

    const close = () => {
        setVisiable(false);
    };
    const close1 = () => {
        setVisiable1(false);
    };
    // 打开弹窗
    const openAdd = () => {
        setTitle("新建用户")
        setUserInfo(false)

        setVisiable(true);
    };
    // 打开修改弹窗
    const openEdit = (item:any) => {
        setTitle("修改用户")
        setUserInfo(item)

        //console.log(userInfo)
        setVisiable(true);
    };
    const openPassWord = (item:any)=>{
        setTitle("修改密码")
        setUserInfo(item)
        setVisiable1(true);
    }
    // const test=()=>{
    //     console.log("dialogRef:",dialogRef)
    //     dialogRef.current.show(onOk,onCancel);
    // }
    //点击确定提交表单
    const submit = (ref: MutableRefObject<FormInstance>) => {
        ref.current.submit();
    };
    const afterSubmit = () => {
        getList({paginate: paginate})
        close();
    };
    const afterSubmit1 = () => {
        close1();
    };


    const UserFormModal = withModal({title}, {afterSubmit, userInfo})(React.forwardRef(UsersForm));
    const PassWorddFormModal = withModal({title}, {afterSubmit1,userInfo})(React.forwardRef(PassWordForm));
    const successFuc=()=>{
        console.log("success--")
    }
    const payload = {
        onOk,
        onCancel
    }
    useEffect(()=>{
        getList({paginate: paginate})
    },[])
    return(
        <>
            <UserFormModal visible={visiable} onCancel={close} onOk={submit} />
            <PassWorddFormModal visible={visiable1} onCancel={close1}  onOk={submit} />
            {/*<UserEditFormModal visible={visiable} onCancel={close} onOk={submit} />*/}
            <Button type="primary" onClick={openAdd} style={{marginBottom:20}} >新增</Button>
            {/*<Button type="primary" onClick={open} style={{marginBottom:20,}}>新增</Button>*/}
            <Table  dataSource={userList} rowKey ={(userList:DataType)=>userList.id} pagination={false}>
            <ColumnGroup title="Name">
                <Column title="用户名" dataIndex="username" key="username" />
                <Column title="真实姓名" dataIndex="realname" key="realname" />
            </ColumnGroup>
            <Column title="邮箱" dataIndex="email" key="email" />
            <Column title="状态" dataIndex="status" key="status" />
            <Column
    title="角色"
    dataIndex="role"
    key="role"
    render={(role: object[]) => (
        <>
            {role.map((item:any,index:number) => (
                <Tag color="blue" key={index}>
                    {item.name}
                </Tag>
            ))}
        </>
    )}></Column>
            <Column
                title="操作"
                render={(item: any, record: DataType) => (

                    <Space size="middle" >
                        <Button type="primary" onClick={()=>{openEdit(item)}}>
                            修改
                        </Button>
                        <Button type="primary" onClick={()=>{openPassWord(item)}} >
                            修改密码
                        </Button>
                        <Button type="primary"  onClick={()=>{delUser(item.id)} }>
                            删除
                        </Button>
                    </Space>
                )}
            />

        </Table>
            {/*<UserModal  />*/}
    <Pagination current={paginate.page}
                style={{ display: 'flex',marginTop: '25px',justifyContent: 'right'}}
                total={paginate.total} onChange={(page:number,perPage:number)=>{getList({paginate:{page:page,per_page:perPage,total:0}})}}  />
    </>
    );
}

export default Index;
